﻿<div class="container-fluid">
  <div class="form-horizontal" style="padding: 10px 0">
    <div class="row">
      <div class="col">
        <label class="col-sm-2 control-label" for="group">Group: </label>
        <div class="col-sm-9">
          <select class="form-control" type="number" [(ngModel)]="group">
            <option *ngFor="let g of group$ | async" [ngValue]="g">
              {{ g }}
            </option>
          </select>
        </div>
      </div>
      <div class="col">
        <label class="col-sm-2 control-label" for="author">Author: </label>
        <div class="col-sm-9">
          <input
            type="text"
            class="form-control"
            id="author"
            placeholder="your name"
            name="author"
            [(ngModel)]="author"
            required
          />
        </div>
      </div>
      <div class="col">
        <div class="col-sm-9">
          <button
            class="btn btn-primary col-sm-12"
            style="margin-bottom: 5px"
            (click)="join()"
          >
            Join
          </button>
          <button class="btn btn-primary col-sm-12" (click)="leave()">
            Leave
          </button>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <form
    class="form-horizontal"
    style="padding: 10px 0"
    (ngSubmit)="sendNewsItem()"
    #newsItemForm="ngForm"
  >
    <div class="row">
      <div class="col">
        <label for="header" class="col-sm-2 control-label">Header</label>
        <div class="col-sm-9">
          <input
            type="text"
            class="form-control"
            id="header"
            placeholder="your header..."
            name="header"
            [(ngModel)]="newsItemHeader"
            required
          />
        </div>
      </div>
      <div class="col">
        <label for="newsText" class="col-sm-2 control-label">Text</label>
        <div class="col-sm-9">
          <input
            type="text"
            class="form-control"
            id="newsText"
            placeholder="your newsText..."
            name="newsText"
            [(ngModel)]="newsItemNewsText"
            required
          />
        </div>
      </div>
      <div class="col">
        <label for="newsText" class="col-sm-2 control-label"></label>
        <div class="col-sm-9">
          <button
            type="submit"
            class="btn btn-primary col-sm-12"
            [disabled]="!newsItemForm.valid"
          >
            Send News to: {{ group }}
          </button>
        </div>
      </div>
    </div>
  </form>

  <div *ngIf="newsItems$ | async as newsItems">
    <div class="row" *ngIf="newsItems?.length > 0; else noitemsfound">
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>header</th>
              <th>Text</th>
              <th>Author</th>
              <th>Group</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of newsItems; let i = index">
              <td>{{ i + 1 }}</td>
              <td>{{ item.header }}</td>
              <td>{{ item.newsText }}</td>
              <td>{{ item.author }}</td>
              <td>{{ item.newsGroup }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <ng-template #noitemsfound>
    <div class="row">
      <span>No items found</span>
    </div>
  </ng-template>
</div>
